<template>
  <main class="post">
    <a-form-model ref="roleForm"
                  :rules="rules"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol" :model="form">
      <a-form-model-item label="角色名称" prop="roleName">
        <a-input v-model="form.roleName" placeholder="请输入角色名称"/>
      </a-form-model-item>
      <a-form-model-item label="角色描述" prop="description">
        <a-input v-model="form.description" placeholder="请输入角色描述"/>
      </a-form-model-item>
      <a-form-model-item label="角色权限" prop="resorceId">
        <a-tree
            v-model="checkedKeys"
            checkable
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :tree-data="treeData"
            @expand="onExpand"
            @check="onCheck"
        />
      </a-form-model-item>
    </a-form-model>
    <div class="footer">
      <a-row>
        <c-btn offset="18" span="3" type="primary" title="保存" @click="save"></c-btn>
        <c-btn span="3" type="default" title="取消" @click="$emit('update:visible',false)"></c-btn>
      </a-row>
    </div>
  </main>
</template>

<script lang="js">
import {insert, update} from "@/api/role";
import {findTrees} from "@/api/resource";

export default {
  props: {
    type: {
      default: 'add'
    },
    editData: {
      default: {}
    },
  },
  data() {
    return {
      labelCol: {span: 3},
      wrapperCol: {span: 21},
      form: {
        roleId: '',
        roleName: "",
        description: "",
        resourceId: [],
      },
      rules: {
        roleName: [
          {required: true, message: '请输入角色名称', trigger: 'blur'},
        ],
      },
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
    }
  },
  created() {
    console.log(this.type, this.editData);
    if (this.type === 'edit') {
      this.getEditData()
    }
    this.getRoleTree();
  },
  methods: {
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    async getRoleTree() {
      let params = {}
      if (this.form.roleId) {
        params = {
          roleId: this.form.roleId
        }
      }
      const res = await findTrees(params)
      console.log(res);
      const arr = this.dealTreeData(res.data.data)
      this.treeData = arr
    },
    dealTreeData(arr) {
      arr.forEach(item => {
        item.title = item.name;
        item.key = item.id;
        if (item.checked) {
          this.checkedKeys.push(item.id);
        }
        if (item.children.length > 0) {
          return this.dealTreeData(item.children)
        }
        return item;
      })
      return arr;
    },
    save() {
      this.$refs['roleForm'].validate((valid) => {
        if (valid) {
          if (this.type === 'add') this.setAddData();
          if (this.type === 'edit') this.setEditData()
        } else {
          this.$message.error('请完善表单信息')
        }
      })
    },
    async setAddData() {
      this.form.resourceId = this.checkedKeys
      const params = {
        ...this.form
      }
      const res = await insert(params);
      if (res['msg'] === 'ok') {
        this.$message.success('添加成功')
        this.$emit('update:visible', false)
        this.$emit('success', res)
      } else {
        this.$message.error(res.msg)
      }
    },
    async setEditData() {
      this.form.resourceId = this.checkedKeys
      const params = {
        ...this.form
      }
      const res = await update(params);
      if (res['msg'] === 'ok') {
        this.$message.success('编辑成功')
        this.$emit('update:visible', false)
        this.$emit('success', res)
      } else {
        this.$message.error(res.msg)
      }
    },
    getEditData() {
      this.form.roleName = this.editData.roleName;
      this.form.description = this.editData.description;
      this.form.roleId = this.editData.roleId;
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
